
<template>
  <view class="comment" v-if="list.length">
    <view class="comment-title">
      <view class="hot" v-if='hot.length'>
        <text class="iconfont  iconhot1"></text>
        <text>最热评论</text>
      </view>
      <view class="new" v-else>
        <text class="iconfont  iconpinglun"></text>
        <text>最新评论</text>
      </view>
    </view>
    <view class="comment-item" v-for="v in list" :key="v.id">
      <view class="user-avatar">
        <image :src="v.user.avatar" />
      </view>
      <view class="user-info-wrap">
        <view class="user-name">
          {{v.user.name}}
        </view>
        <view class="user-time">
          {{v.cnTime}}
        </view>
        <view class="user-icon" v-if="v.user.title.length">
          <image v-for="item in v.user.title" :key="item.icon" :src="item.icon" />
        </view>
        <view class="comment-desc">
          {{v.content}}
        </view>
        <view class="comment-like">
          <text class="iconfont icondianzan"></text>{{v.size}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    hot: {
      type: Array,
      default() {
        return []
      }
    },
    comment: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    list() {
      let list = []
      if (this.hot.length) {
        list = this.hot
      } else {
        list = this.comment
      }
      return list
    }
  }
}
</script>

<style lang='scss'   scoped>
.comment-title {
  padding: 20rpx 0;
  font-size: 38rpx;
  .iconhot1 {
    padding: 0 20rpx;
    color: red;
  }
  .iconpinglun {
    padding: 0 20rpx;
    color: purple;
  }
}
.comment-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 15rpx solid #eee;
  .user-avatar {
    margin-left: 10rpx;
    image {
      width: 60rpx;
      height: 60rpx;
    }
  }
  .user-info-wrap {
    flex: 1;
    padding: 0 20rpx;
    position: relative;
  }
  .user-name {
    font-size: 30rpx;
    color: #000;
  }
  .user-time {
    color: #ccc;
    font-size: 28rpx;
  }
  .comment-desc {
    padding: 20rpx 0;
  }
  .user-icon {
    position: absolute;
    top: 0;
    right: 20rpx;
    display: flex;
    align-items: center;
    image {
      width: 34rpx;
      height: 34rpx;
      margin: 0 2rpx;
    }
  }
  .comment-like {
    position: absolute;
    bottom: 0;
    right: 20rpx;
  }
}
</style>